<template>
  <div class="bgc-default pad-20">
    <div class="tab-sticky">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="批发商管理" name="0"></el-tab-pane>
        <el-tab-pane label="批发商申请" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="bg-color-white pad-20 mar-t-20">      
      <wholesale-manage v-show="wholesaleManageVisible" :showFlag="wholesaleManageVisible" :recruiterId="recruiterId"></wholesale-manage>
      <wholesale-apply v-show="wholesaleApplyVisible" :showFlag="wholesaleApplyVisible" :recruiterId="recruiterId"></wholesale-apply>  
  </div>
  </div>
</template>

<script>
  import { getNameByPath } from '@/utils/get-name-by-path'
  import wholesaleManage from './components/wholesale-manage'
  import wholesaleApply from './components/wholesale-apply'

  export default {
    name: getNameByPath(),
    components: { wholesaleManage, wholesaleApply },
    data() {
      return {
        activeName: '0',
        wholesaleManageVisible: true,
        wholesaleApplyVisible: false,
        recruiterId: ''
      }
    },
    filters: {
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.recruiterId) {
        this.recruiterId = queryParams.recruiterId
      }
    },
    mounted() {
    },
    methods: {
      // tab切换事件
      handleClick() {
        if (this.activeName === '1') {
          this.wholesaleManageVisible = false
          this.wholesaleApplyVisible = true
        } else {
          this.wholesaleManageVisible = true
          this.wholesaleApplyVisible = false
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.tab-sticky {
  position: sticky;
  top: 0px;
  left: 20px;
  width: calc(100% + 40px);
  background: white;
  z-index: 1000;
  padding-top: 10px;
  padding-left: 17px;
  margin-left: -20px;
  margin-top: -20px;
  /deep/ .el-tabs__header{
    margin: 0;
  }
}
</style>